import React, { useEffect, useRef, useState, useContext } from 'react';
import { Input, Message, Form, Radio, Button, Row, Col, Select } from 'antd';
import moment from 'moment';
import CryptoJS from 'crypto-js';
import styles from './style.module.scss';

import Drawer from 'components/Drawer';

import { HomeContext } from './../context';

const formItemLayout = {
    labelCol: {
        md: { span: 4 },
        sm: { span: 4 },
        xs: { span: 24 },
    },
    wrapperCol: {
        md: { span: 20 }, // 屏幕 ≥ 768px
        sm: { span: 20 }, // 屏幕 ≥ 576px
        xs: { span: 24 }, // 屏幕 < 576px
    },
};
const tailLayout = {
    wrapperCol: {
        md: { offset: 4, span: 20 },
        sm: { offset: 4, span: 20 },
        xs: { offset: 0, span: 24 },
    },
};

// 账户编辑
const Detail = (props) => {
    const { record, viewMoreVisible, labels, viewMoreHandleCancel, editHandle, viewPassHandle } = useContext(HomeContext);

    const formInstance = useRef();

    const initialValues = record || {};

    // 点击编辑
    function handleSubmit() {
        viewMoreHandleCancel();
        editHandle(record);
    };
    function handleViewPass() {
        viewMoreHandleCancel();
        viewPassHandle(record)
    };
    // 关闭弹窗
    function close() {
        viewMoreHandleCancel()
    }
    function formatStatus(status) {
        return ['正常', '停用', '注销'][Number(status)]
    }
    function formatTags(tagsArr) {
        if (!tagsArr) {
            return;
        }
        let tags = tagsArr.map(item => {
            return labels.find(i => i.id === item);
        })
        return tags.map(item => {
            return (
                <span className={styles.label}>{item.label}</span>
            )
        })
    }
    return (
        <Drawer
            visible={viewMoreVisible}
            title={'查看详情'}
            onClose={close}
        >
            <div className={styles.container}>
                <div className={styles.formContent}>
                    <Form
                        {...formItemLayout}
                        initialValues={initialValues}
                        onFinish={handleSubmit}
                        ref={formInstance}
                    >
                        <Form.Item label={'网站名称'}>{initialValues.site}</Form.Item>
                        <Form.Item label={'网站地址'}>{initialValues.website}</Form.Item>
                        <Form.Item label={'网站简介'}>{initialValues.introduction}</Form.Item>
                        <Form.Item label={'注册账户'}>{initialValues.account}</Form.Item>
                        <Form.Item label={'加密密码'}>{initialValues.password}<Button type="link" onClick={handleViewPass}>查看密码</Button></Form.Item>
                        <Form.Item label={'关联账户'}>{initialValues.associates}</Form.Item>
                        <Form.Item label={'昵称'}>{initialValues.nickname}</Form.Item>
                        <Form.Item label={'状态'}>{formatStatus(initialValues.status)}</Form.Item>
                        <Form.Item label={'备注'}>{initialValues.remark}</Form.Item>
                        <Form.Item label={'标签'}>{formatTags(initialValues.tags)}</Form.Item>
                        <Form.Item label={'创建时间'}>{initialValues.createTime ? moment(initialValues.createTime).format('YYYY-MM-DD HH:mm:ss') : '--'}</Form.Item>
                        <Form.Item label={'更新时间'}>{initialValues.updateTime ? moment(initialValues.updateTime).format('YYYY-MM-DD HH:mm:ss') : '--'}</Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button htmlType="submit" type="primary" className={styles.inputStyle2}>编辑</Button>
                            <span className={styles.splitBlock}></span>
                            <Button type="primary" className={styles.inputStyle2} onClick={handleViewPass}>查看密码</Button>
                            <span className={styles.splitBlock}></span>
                            <Button className={styles.inputStyle2} onClick={close}>取消</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </Drawer >
    )
}

Detail.defaultProps = {
    onCancel: () => { },
    onOk: () => { },
}


export default Detail;